<template>
  <div class="over-content">
    <div class="top-content">
      <div class="content-title">
        <div></div>
        <div>投入</div>
      </div>
      <div class="content-substance">
        <div class="substance-one">
          <div>总人数</div>
          <div>{{ numData.peopleNum }}</div>
        </div>
        <div class="substance-two">
          <div>预计工时</div>
          <div>{{ numData.estimatedWorkingHours }}</div>
        </div>
        <div class="substance-three">
          <div>已消耗</div>
          <div>{{ numData.realityWorkingHours }}</div>
        </div>
      </div>
    </div>
    <div class="top-content">
      <div class="content-title">
        <div></div>
        <div>需求数</div>
      </div>
      <div class="content-substance">
        <div class="substance-one">
          <div>总研发需求</div>
          <div>{{ numData.demandNum }}</div>
        </div>
        <div class="substance-two">
          <div>已完成</div>
          <div>{{ numData.demandCompletedNum }}</div>
        </div>
        <div class="substance-three">
          <div>剩余</div>
          <div>{{ numData.demandIncompleteNum }}</div>
        </div>
      </div>
    </div>
    <div class="top-content">
      <div class="content-title">
        <div></div>
        <div>任务数</div>
      </div>
      <div class="content-substance">
        <div class="substance-one">
          <div>已完成</div>
          <div>{{ numData.taskClosedNum }}</div>
        </div>
        <div class="substance-two">
          <div>进行中</div>
          <div>{{ numData.taskDoingNum }}</div>
        </div>
        <div class="substance-three">
          <div>未开始</div>
          <div>{{ numData.taskWaitNum }}</div>
        </div>
      </div>
    </div>
    <div class="top-content">
      <div class="content-title">
        <div></div>
        <div>Bug数</div>
      </div>
      <div class="content-substance">
        <div class="substance-one">
          <div>总Bug数</div>
          <div>{{ numData.bugNum }}</div>
        </div>
        <div class="substance-two">
          <div>已解决</div>
          <div>{{ numData.bugCompletedNum }}</div>
        </div>
        <div class="substance-three">
          <div>未解决</div>
          <div>{{ numData.bugIncompleteNum }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNum } from '@/apis/project'
export default {
  props: {
    overviewList: {
      type: Array,
    },
    infoData: {
      type: Object,
    },
  },
  data() {
    return {
      numData: {},
    }
  },
  mounted() {
    this.getNum()
  },
  methods: {
    async getNum() {
      const res = await getNum(this.infoData.id)
      this.numData = res
    },
  },
}
</script>
<style lang="scss" scoped>
.top-content{
    padding: 0px 0px 0px 12px;
    .content-title{
        display: flex;
        align-items: center;
        padding:10px 0px;
        div:nth-child(1){
			width: 4px;
			height: 4px;
			background: #739ECA;
			border-radius: 2px;
			margin-right: 5px;
        }
        div:nth-child(2){
			font-size: 12px;
			font-weight: 600;
			color: #000000;
        }
    }
    .content-substance{
        display: flex;
        justify-content: space-between;
        margin: 0px 8px 10px 9px;
        border-bottom: 1px solid #F4F4F4;
        padding-bottom: 10px;
        .substance-one{
			width: 33%;
			text-align: center;
			div:nth-child(1){
				font-size: 12px;
				font-weight: 600;
				color: #739ECA;
			}
			div:nth-child(2){
				font-size: 14px;
				color: #000000;
				text-align: center;
			}
        }
        .substance-two{
			width: 33%;
			text-align: center;
			div:nth-child(1){
				font-size: 12px;
				font-weight: 600;
				color: #04CB64;
			}
			div:nth-child(2){
				font-size: 14px;
				color: #000000;
				text-align: center;
			}
        }
        .substance-three{
			width: 33%;
			text-align: center;
			div:nth-child(1){
				font-size: 12px;
				font-weight: 600;
				color: #FF0018;
			}
			div:nth-child(2){
				font-size: 14px;
				color: #000000;
				text-align: center;
			}
        }
    }
}
</style>
